<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/mui.min.css" />
	<script src="js/mui.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/template.js"></script>
	<script src="js/jquery-3.1.1.min.js"></script>
	</head>
	<style>
		body{
			background: #FFFFFF!important;
			
		}
		.mui-slider-item  > img{
			
			height: 150px;
		}
		.mui-content{
		   width: 100%;
		   padding: 0  15px;
		   display: inline-block;
		   box-sizing: border-box;
		   padding-top: 20px;
           z-index: -10;
		   padding-bottom: 25px;
	   }
	   a:active{
		   background: none!important;
	   }
	   .mui-search .mui-placeholder{
		   text-align: left;
		   padding-left: 10px;
		   box-sizing: border-box;
		   color:rgba(152,152,152,1);
	   }
	  input[type=search]{
        border-radius:19px;
	   }
	   .lunbo2{
		   width: 100%;
		   height: 32px;
		   margin-top: 20px;
	   }
	   .swiper-container{
		   height: 32px;
		   width: 100%;
		   margin-top: 15px;
		  line-height: 32px;
		  color: #FF5A59;
		  padding-bottom: 5px;
	   }
	   li:active{
		   background: none!important;
	   }
	   #mui-indicator{
		  background:rgba(255,255,255,0.5);
	   }
		  .mui-active{
			    background:rgba(255,255,255,1)!important;
		  }
		  .mui-grid-view{
		  	background: none;
		  	border: none!important;
			padding: 0px!important;
			position: relative;
			float: left;
		  }
		.daohang  .mui-media-object{
			width: 49px!important;
			height: 49px!important;
		}
		  
		  .mui-table-view:before {
		  	height: 0px;
		  }
		  
		  .mui-table-view:after {
		  	height: 0px;
		  }
		  
		  .mui-table-view.mui-grid-view .mui-table-view-cell {
			  padding: 15px 0 0 15px ;
			  
		  }
		  .shoujiu{
			  position: relative;
			  width: 100%;
			  height: 70px;
			  margin-top: 25px;
			  border-radius:35px;
		  }
		  
		  h5{
				margin-top: 18px;
				font-size:15px;
				color:rgba(51,51,51,1);
				background: none!important;
		  }
		  .hang{
			  position: relative;
			  float: left;
			  width: 100%;
			 padding: 3px  8px;
			  box-sizing: border-box;
		  }
		  
		  .hang>div:nth-child(1){
			  position: relative;
			  float: left;
			  width: 50%;
			  height: 100%;
			  line-height: 20px;
			    text-align: left;
			 font-size:12px;
             font-weight:500;
            color:rgba(51,51,51,1);
		 overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		  }
		  	  .hang>div:nth-child(2){
		  			  position: relative;
		  			  float: left;
		  			  width: 50%;
		  			  height: 100%;
					 overflow: hidden;
					text-overflow: ellipsis;
					text-align: right;
		  }
		  .hang>div:nth-child(2)>img{
			  width: 12.5px;
			  height: 9px;
		  }
		   .hang>div:nth-child(2)>span{
			   line-height: 20px;
			   font-size: 12px;
			   width: calc(100% -  15px);
			color:rgba(153,153,153,1);
		   }
		   
		   .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
			  color:rgba(153,153,153,1);
			  font-size: 11px;
			  text-align: center;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
		   }

		
		
		.neirongd{
			width: calc(100% - 30px);
			text-align: center;
			position: relative;
			float: right;
			line-height: 30px;
			font-size: 15px;
			text-align: left;
			overflow: hidden;
		}
		  .swiper-container  img{
			  position: relative;
			  float: left;
			 width: 16px;
			 height: 16px;
			margin-top: 5px;
		}
		
		.othervideo{
			position: relative;
			float: left;
			width: 100%;
		}
		.otherdd>a>img{
			width: 100%;
			height: 134px;
		}
		.otherdd{
				  	position: relative;
				  	float: left;
				  	width: calc((100% -  20px) /  2);
				  	margin-top: 10px;
				  	background: #FFFFFF;
					margin-left: 5px;
					padding-bottom: 15px;
		}
		.mui-media-body{
			position: relative;
			float: left;
			width: 100%;
			font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
            line-height:18px;
            padding: 0  8px;
            box-sizing: border-box;
		}
		
   </style>
	<body>

		<div class="mui-content">
			<!-- 搜索 -->
			<div class="mui-input-row mui-search title-rigth">
				<input ref="scanTextbox" type="search"  readonly='readonly' id="sou" class="mui-input-clear" placeholder="请输入你想要搜索的内容">
			</div>

			<!-- 轮播 -->
			<div class="mui-slider ">

				<div  id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop"  id="bannersd"> 
					
					</div>
			   
					
				 	<div class="mui-slider-indicator diandian">
						
					</div>
				</div>
			</div>

			<!-- 喇叭通知   -->
			<div class="swiper-container" id="swiper1">
				<div class="swiper-slide"><img src="image/laba.png" /><div class="neirongd">欢迎下载本应用</div></div>
			</div>

			<ul class="mui-table-view mui-grid-view  daohang"  id="typeviedio">
				<!-- <li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img class="mui-media-object" src="image/shou1.png">
						<div class="mui-media-body">娱乐搞笑</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img class="mui-media-object" src="image/shou2.png">
						<div class="mui-media-body">相生小品</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#"><img class="mui-media-object" src="image/shou3.png">
						<div class="mui-media-body">搞笑段子</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img class="mui-media-object" src="image/shou4.png">
						<div class="mui-media-body">记录影片</div>
					</a></li>

				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img class="mui-media-object" src="image/shou5.png">
						<div class="mui-media-body">综艺节目</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img class="mui-media-object" src="image/shou6.png">
						<div class="mui-media-body">娱乐节目</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#"><img class="mui-media-object" src="image/shou7.png">
						<div class="mui-media-body">动漫世界</div>
					</a></li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img class="mui-media-object" src="image/shou8.png">
						<div class="mui-media-body">娱乐世界</div>
					</a></li> -->
			</ul>

			<img id="shoujiu" class="shoujiu" src="image/shou9.png" />

			<h5 style="background-color:#efeff4">其他推荐</h5>
			<ul class="mui-table-view mui-grid-view"  id="othervideo">
			<!-- 	<li class="otherdd">
					<a href="#">
						<img class="" src="image/shou10.png">
						<div class="hang">
							<div>视频标题栏</div>
							<div><img src="image/hushou11.png" /><span>12.5万浏览</span></div>
						</div>
						<div class="mui-media-body">
							这个是简介这个是简介这个是简介这个是简介
						</div>
					</a></li>

				<li class=" otherdd">
					<a href="#">
						<img class="" src="image/shou10.png">
						<div class="hang">
							<div>视频标题栏</div>
							<div><img src="image/hushou11.png" /><span>12.5万浏览</span></div>
						</div>
						<div class="mui-media-body">
							这个是简介这个是简介这个是简介这个是简介
						</div>
					</a></li>

				<li class="otherdd">
					<a href="#">
						<img class="" src="image/shou10.png">
						<div class="hang">
							<div>视频标题栏</div>
							<div><img src="image/hushou11.png" /><span>12.5万浏览</span></div>
						</div>
						<div class="mui-media-body">
							这个是简介这个是简介这个是简介这个是简介
						</div>
					</a></li>

				<li class="otherdd">
					<a href="#">
						<img class="" src="image/shou10.png">
						<div class="hang">
							<div>视频标题栏</div>
							<div><img src="image/hushou11.png" /><span>12.5万浏览</span></div>
						</div>
						<div class="mui-media-body">
							这个是简介这个是简介这个是简介这个是简介
						</div>
					</a></li> -->

			</ul>
		</div>

	</body>
	 
	<!-- <script src="js/vue.js"></script> -->
	<script src="js/mui.min.js"></script>
	<script  type="text/javascript">
		window.addEventListener("adse", function (e) {
			location.reload();
			});
		mui.plusReady(function () {
		    var user = plus.storage.getItem('user');
			// plus.storage.setItem('url','http://juyous.cybwnt.com');
			var url = plus.storage.getItem('url');
			//mui出初始化
			mui.init({
			});
			$.post(url+'/juyou/index/indexs',{},function(res){
				// console.log(res);
				var lunbo = res.data.lunbo.dir;
				var fenlei = res.data.fenlei;
				var guanggao = res.data.guanggao.dir[0];
				var xiaoxi = res.data.xiaoxi;
				var tuijian = res.data.tuijian;
				  //加载轮播图
			       	var str="";
						 str+="<div class='mui-slider-group mui-slider-loop'  id='bannersd'>"
						str+= "<div class='mui-slider-item mui-slider-item-duplicate'>"
						str+= "<a href='#'>"
						str+="<img src='"+lunbo[lunbo.length-1]+"' />"
						 str+="</a>"
						 str+="</div>"
				    $.each(lunbo,function (i,v) {
				     str+= "<div class='mui-slider-item'>"
				     str+= "<a href='#'>"
				     str+="<img src='"+v+"' />"
				      str+=	"</a>"
				      str+="</div>"
				      })					
					str+= "<div class='mui-slider-item mui-slider-item-duplicate'>"
					str+= "<a href='#'>"
					str+="<img src='"+lunbo[0]+"' />"
					 str+=	"</a>"
					 str+="</div>"
					  str+="</div>"
					 str+="<div class='mui-slider-indicator diandian'>"
					 for(var j=0;j<lunbo.length;j++){
						 if(j==0){
							 str+='<div  class="mui-indicator mui-active"></div>'; 
						 }else{
							 str+='<div   class="mui-indicator"></div>';  
						 }
					 }
					 str+="</div>"	
					$("#slider").html(str)
					var  time=1000;
				var slider = mui('.mui-slider')
				slider.slider({
					interval: time
				});
				
				
				//加载分类
				str = '';
				$.each(fenlei,function(i,v){
					str += '<li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#" data-id="'+v.id+'"><img class="mui-media-object" src="'+v.tubiao+'">'+
					'<div class="mui-media-body" data-id="'+v.id+'">'+v.name+'</div>'+
							'</a></li>';
			
				})
				$("#typeviedio").append(str)
				
				//添加广告
				$("#shoujiu").attr('src',guanggao);
				
				
				//添加视频
				str= '';
				var newstr = '';
				$.each(tuijian,function(i,v){
					if(v.frequency>10000){
						newstr = Math.round(v.frequency/100)/100;
					}else{
						newstr = v.frequency;
					}
					str+='<li class="otherdd" data-id="'+v.id+'">'+
						'<a href="#" >'+
							'<img class="" src="'+v.covers+'">'+
							'<div class="hang">'+
								'<div>'+v.name+'</div>'+
								'<div><img src="image/hushou11.png" /><span>'+newstr+'浏览</span></div>'+
							'</div>'+
							'<div class="mui-media-body">'+v.dir+'</div>'+
						'</a></li>';
				})
				$("#othervideo").append(str);
				
				
				
				
				
				document.getElementById("sou").addEventListener("focus",function(){
						mui.openWindow({
						url:"./sub1/xqsousub1.html",
						id:"./sub1/xqsousub1.html",
					})
				})
				
				
				// 点击的8个标题a
				// $(document).on('tap','a',function(){
				// 	
				// 	var id= $(this).attr('dataid');
				// 	mui.alert(id)
				// })
				// function dianji(id){
				// 	mui.alert(id)
				// }
				mui("#typeviedio").on("tap","a",function(){
					var id = $(this).attr('data-id');
					
					mui.openWindow({
						url:"sub1/xxqsousub1.html",
						id:"sub1/xxqsousub1.html",
						extras: {
						fenneiid:id,
						},
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
							duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					})
				})
				
				
				//首页点击视频详情
				mui("#othervideo").on("tap","li",function(){
						var id  = $(this).attr('data-id');
						console.log(id);
						
						mui.openWindow({
						url:'./sub1/video.html',
						id:"./sub1/video.html",
						extras: {
						videoid:id,
						},
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
							duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					})
				})
				
			})
		})
		
		
	</script>

</html>
